<template>
  <div>
    <a-modal v-model="visible" :width="820" title="添加打卡地点" @ok="handerOk">
      <map-drag lat="22.574405" lng="114.095388" @drag="dragMap" />
      <ul class="info">
        <li><span>经度：</span>{{ dragData.lng }}</li>
        <li><span>纬度：</span>{{ dragData.lat }}</li>
        <li><span>地址：</span>{{ dragData.address }}</li>
        <li><span>最近的路口：</span>{{ dragData.nearestJunction }}</li>
        <li><span>最近的路：</span>{{ dragData.nearestRoad }}</li>
        <li><span>最近的POI：</span>{{ dragData.nearestPOI }}</li>
        <li>
          <span>打卡距离：</span>
          <a-input-number v-model="dragData.distance" :min="0" style="width: 200px" placeholder="打卡距离" />
          米
        </li>
      </ul>
    </a-modal>
  </div>
</template>

<script>
export default {
  components: { mapDrag: () => import("./mapDrag") },
  props: {
    cardPositionOptions: {
      type: Object,
      default: () => ({
        show: false,
        obj: {}
      })
    }
  },
  data() {
    return {
      visible: false,
      dragData: {
        lng: null,
        lat: null,
        address: null,
        nearestJunction: null,
        nearestRoad: null,
        nearestPOI: null,
        distance: 1000
      }
    };
  },

  watch: {
    cardPositionOptions: {
      handler(val) {
        this.visible = val.show;
      }
    },
    location: {
      handler(val) {}
    }
  },

  methods: {
    dragMap(data) {
      this.dragData.lng = data.position.lng;
      this.dragData.lat = data.position.lat;
      this.dragData.address = data.address;
      this.dragData.nearestJunction = data.nearestJunction;
      this.dragData.nearestRoad = data.nearestRoad;
      this.dragData.nearestPOI = data.nearestPOI;
    },
    handerOk() {
      if (this.dragData.address === null) {
        this.$notification["error"]({
          message: "失败",
          description: "请填写打卡位置！"
        });
        return;
      }
      if (!this.dragData.distance) {
        this.dragData.distance = 1000;
      }
      this.$emit("cardPos", this.dragData);
      this.visible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.info {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 30px;
  margin-top: 20px;
}
</style>
